<html>
    <head>
        <title>Point Cloud on globe</title>

        <script type="importmap">
        {
            "imports": {
                "itowns": "../dist/itowns.js",
                "debug": "../dist/debug.js",
                "lil": "https://unpkg.com/lil-gui@0.19.2/dist/lil-gui.esm.min.js",
                "LoadingScreen": "./jsm/GUI/LoadingScreen.js",
                "itowns_widgets": "../dist/itowns_widgets.js",
                "three": "https://unpkg.com/three@0.170.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.170.0/examples/jsm/"
            }
        }
        </script>
        <style type="text/css">
            #info {
                color: #7ad7ff;
                font-family: 'Open Sans', sans-serif;
                position: absolute;
                top: 0;
                left: 0;
                padding: 0.3rem;
                background-color: #404040;
                z-index: 1;
            }

            @media (max-width: 600px) {
                #info,
                .dg {
                    display: none;
                }
            }
        </style>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv"></div>
        <div id="info"></div>

        <script type="module">

            import lil from 'lil';
            import setupLoadingScreen from 'LoadingScreen';
            import * as THREE from 'three';
            import * as itowns from 'itowns';
            import * as debug from 'debug';
            import * as itowns_widgets from 'itowns_widgets';

            var potreeLayer;
            var oldPostUpdate;
            var viewerDiv;
            var debugGui;
            var view;

            viewerDiv = document.getElementById('viewerDiv');
            viewerDiv.style.display = 'block';

            debugGui = new lil();

            var view = new itowns.GlobeView(viewerDiv);
            setupLoadingScreen(viewerDiv, view);

            view.controls.minDistance = 50;

            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ElevationLayer(config.id, config);
                view.addLayer(layer);
            });
            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ColorLayer(config.id, config);
                view.addLayer(layer);
            });

            /* OTHER dataset
            Donnees geocentrique -> probleme pour le placement camera
            name = 'eglise_saint_blaise_arles';
            const url = 'https://raw.githubusercontent.com/gmaillet/dataset/master/';
            const file = 'eglise_saint_blaise_arles.js';
            const crs = 'EPSG:4978';
            */

            itowns.CRS.defs("EPSG:25831","+proj=utm +zone=31 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs");
            name = 'TempleSagradaFamilia';
            const url = 'https://betaserver.icgc.cat/potree12/resources/pointclouds/templesagradafamilia';
            const file = 'cloud.js';
            const crs = 'EPSG:25831';

            // Configure Point Cloud layer
            const potreeSource = new itowns.PotreeSource({
                    file,
                    url,
                    crs,
                });

            potreeLayer = new itowns.PotreeLayer(name, {
                source: potreeSource,
            });

            // add potreeLayer to scene
            function onLayerReady() {
                var lookAt = potreeLayer.root.clampOBB.position;

                var coordLookAt = new itowns.Coordinates(view.referenceCrs).setFromVector3(lookAt);

                var size = new THREE.Vector3();
                potreeLayer.root.voxelOBB.box3D.getSize(size);

                console.log(coordLookAt);

                view.controls.lookAtCoordinate({
                    coord: coordLookAt,
                    range: 2 * size.length(),
                }, false);

                // add GUI
                debug.PointCloudDebug.initTools(view, potreeLayer, debugGui);

                // update stats window
                var info = document.getElementById('info');
                view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.AFTER_RENDER, () => {
                    info.textContent = potreeLayer.displayedCount.toLocaleString() + ' points';
                });
            }
            window.view = view;

            itowns.View.prototype.addLayer.call(view, potreeLayer).then(onLayerReady);


            window.view = view;
            window.itowns = itowns;
            window.THREE = THREE;

        </script>
    </body>
</html>

